<template>
	<view class="page-body" :style="'height:'+height+'px'">
		<scroll-view class="nav-left" scroll-y :style="'height:'+height+'px'" :scroll-top="scrollLeftTop" scroll-with-animation>
			<block v-for="(item,index) in playList" :key="index">
				<view class="nav-left-item" @click="categoryClickMain(index,item.city,item.code)" :class="index==categoryActive?'active':''">
					{{item.title}}
				</view>
			</block>
		</scroll-view>
		<scroll-view class="nav-right" scroll-y :scroll-top="scrollTop" scroll-with-animation>
			<view v-for="(item,index) in recommendTravels" :key="index" class="box">
				<view class="peripheryplay-image" @click="goToTravel(item.id)">
					<view></view>
					<image :src="item.listImage" style="width: 100%;height: 100%;"></image>
				</view>
				<view class="peripheryplay-text">
					<text>{{item.title}}</text>
				</view>
				<view>
					<text>{{item.otherTitle}}</text>
				</view>
				<!-- <view :id="i==0?'first':''" class="nav-right-item" v-for="(item,i) in foods.foods" :key="i" @click="cart(item.name)">
					<image :src="item.icon" />
					<view>{{item.name}}</view>
				</view> -->
			</view>
		</scroll-view>
	</view>
</template>

<script>
	var currentPage2 = 1
	export default {
		data() {
			return {
				recommendTravels:[],
				citys:'',
				currentJiSanId:'',
				playList:[],
				name: "wkiwi",
				height: 0,
				categoryActive: 0,
				scrollTop: 0,
				scrollLeftTop: 0,
				// scrollHeight: 0,
				// classifyData:classifyData,
				arr:[0,584,1168,1752,2336,2805,3274,3858,4442,4911,5380,5734,6203,6672,7017],//初始值，后边计算会根据手机适配覆盖
				leftItemHeight: 51,//49行会计算出新值进行覆盖
				navLeftHeight:0,//左边scroll-view 内层nav的总高度
				diff: 0,//左边scroll-view 内层nav的总高度与视口之差
				tabBarHeight:0,//如果此页面为Tab页面，自己改变高度值,,一般tab高度为51
			}
		},
		created(){
			//如果你的分类数据为后台异步获取请	将下方代码放置你的数据回调中
			// this.$nextTick(()=>{
			// 	this.getHeightList();
			// })
		},
		onLoad: function () {
			currentPage2 = 1
			this.getNewDistributionList("旅游目的地")
			this.height = uni.getSystemInfoSync().windowHeight - this.tabBarHeight;
		},
		onReady() {
			// this.getHeightList();
		},
		methods: {
			getNewDistributionList: function(centreType){
				var that = this;
				var param = {
					channelType:'1',
					pageIndex: '1',
					pageSize:'100',
					centreType:centreType
				}
				
				this.$postApi(this.$path.GET_NEW_DESTINATION_LIST,param).then(res=>{
					console.log("目的地返回参数------------------->",res.data)
					// console.log(res)
					if (res.data.success) {
						this.playList = res.data.data.list
						var goods = this.playList.concat(res.data.data.list);
						this.currentJiSanId = this.playList[0].code
						this.citys = this.playList[0].city
						goods.forEach(item => {
							item.otherImage = this.pub.delLastf(item.otherImage)
						})
						
						this.getPeripheryLsit("目的地-热门游记",this.playList[0].city,this.playList[0].code)
					}
				})
			},
			getPeripheryLsit:function(attribute,citys,currentJiSanId){
				var that = this
				// this.recommendTravels = []
				var param = {
					channelType: '1',
					pageIndex: currentPage2,
					pageSize: '6',
					busid:currentJiSanId,
					attribute:attribute,
					city:citys
				}
				this.$postApi(this.$path.GET_NEW_DESTINATION_TRAVELS,param).then(res=>{
					// this.recommendTravels = []
							
					// this.recommendTravels = res.data.data.list
					let list = res.data.data.list
					console.log("返回参数游记列表目的地",res)
					if (res.data.success) {
						list.forEach(item => {
							item.listImage = this.pub.delLastf(item.listImage)
						})
					
						if (currentPage2 == 1) {
							var content = list
						} else {
							var content = this.recommendTravels.concat(list)
						}
					
						var isNoMore = false
						var isEmpty = false
					
						if (content.length == 0) {
							isEmpty = true;
							isNoMore = false;
							console.log("content=0")
						} else if (!res.data.data.hasNextPage){
							console.log("hasNextPage = false")
							//已经无再多数据
							isNoMore = true;
							isEmpty = false;
						}
						currentPage2++;
						this.recommendTravels = content;
						this.isNoMore = isNoMore;
						this.isEmpty = isEmpty;
					}	
				})
			},
			categoryClickMain(index,city,currentJiSanId) {
				this.categoryActive = index;
				currentPage2 = 1
				this.getPeripheryLsit("目的地-热门游记",city,currentJiSanId)
				// this.scrollTop == this.arr[index] ? this.scrollTop = this.scrollTop+1 : this.scrollTop = this.arr[index]//防止两次相等造成点击不触发滚动时间
			},
			goToTravel:function(id){
				uni.navigateTo({
					url:'/pages/travelDetail/travelDetail?id=' + id,
					animationType: 'pop-in',
					animationDuration: 200
				})
			},
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			// getHeightList(){
			// 	let _this = this;
			// 	let selectorQuery=uni.createSelectorQuery();
			// 	selectorQuery.selectAll('.nav-left-item').boundingClientRect(function(rects) {
			// 		_this.leftItemHeight  =  rects[0].height;
			// 		_this.navLeftHeight = _this.leftItemHeight * classifyData.length;
			// 		_this.diff =  _this.navLeftHeight - _this.height;
			// 	});
			// 	selectorQuery.selectAll('.box').boundingClientRect(function(rects) {
			// 		let arr = [0];
			// 		let top = 0;
			// 		rects.forEach(function(rect){
	// 					rect.id      // 节点的ID
	// 					rect.dataset // 节点的dataset
	// 					rect.left    // 节点的左边界坐标
	// 					rect.right   // 节点的右边界坐标
	// 					rect.top     // 节点的上边界坐标
	// 					rect.bottom  // 节点的下边界坐标
	// 					rect.width   // 节点的宽度
	// 					rect.height  // 节点的高度
			// 			top += rect.height;
			// 			arr.push(top)
			// 			})
			// 			console.log(arr)
			// 			_this.arr = arr
			// 		}).exec()
			// },
			// scroll(e) {
			// 	let _this = this
			// 	if(this.timeoutId){
			// 		clearTimeout(this.timeoutId);
			// 	}
			// 	this.timeoutId = setTimeout(function(){ //节流
			// 		_this.scrollHeight = e.detail.scrollTop + 1 + _this.height/2;
			// 		//+1不要删除，解决最后一项某种情况下翻到底部，左边按钮并不会切换至最后一个
			// 		//若想使切换参考线为屏幕顶部请删除 _this.height/2
			// 		for (let i = 0; i < _this.arr.length;i++) {
			// 			let height1 = _this.arr[i];
			// 			let height2 = _this.arr[i+1];
			// 			if (!height2 || (_this.scrollHeight >= height1 && _this.scrollHeight < height2)) {
			// 				_this.categoryActive = i;
			// 				(_this.diff>0) && (_this.scrollLeftTop = Math.round((_this.categoryActive * _this.diff)/(classifyData.length-1)));
			// 				return false;
			// 			}
			// 		}
			// 		_this.categoryActive = 0;
			// 		_this.timeoutId = undefined;
			// 	}, 10)
			// },
			// cart: function (text) {
			// 	uni.showToast({
			// 		title: text,
			// 		icon: "none",
			// 	})
			// }
		},
		components: {
		}
	}
</script>

<style lang="scss">
	.peripheryplay-image{
		width:100%;
		height: 343upx;
	}
	.peripheryplay-text{
		background: linear-gradient(0deg,rgba(0, 0, 0, 0.89) 0%, rgba(0, 0, 0, 0) 100%);
		font-family: PingFang-SC-Bold;
		font-size: 32upx;
		font-weight: bold;
		font-stretch: normal;
		letter-spacing: 2upx;
		color: #ffffff;
		position: absolute;
		padding: 0 0 14upx 17upx;
		left:0;
		bottom: 0;
		width: 100%;
		line-height: 38upx;
	}
	.page-body {
			display: flex;
			background: #fff;
			overflow: hidden;
		}

		.nav {
			display: flex;
			width: 100%;
		}

		.nav-left {
			width: 25%;
			background: #fafafa;
		}

		.nav-left-item {
			height: 100upx;
			background: #FFFFFF;
			border-right: solid 1upx #f1f1f1;
			border-bottom: solid 1upx #f1f1f1;
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: PingFang-SC-Medium;
			font-size: 32upx;
			font-weight: normal;
			font-stretch: normal;
			letter-spacing: 2upx;
			color: #666666;
		}
		.nav-left-item:last-child{
			border-bottom: none;
		}
		.nav-right {
			background: #fff;
			padding: 0 25upx 0 25upx;
			width: 75%;
			height: 100%;
		}
		.box {
			height: 343upx !important;
			border-radius: 6upx;
			background: #fff;
			position: relative;
			display: block;
			overflow: hidden;
			margin-bottom: 20upx;
			// border-bottom: 20upx solid #fff;
			/* min-height: 100vh; */ 
			/*若您的子分类过少想使得每个子分类占满屏请放开上边注视 */
		}
		.box:last-child {
			border: none;
			// min-height:100vh;
		}
		.nav-right-item {
			width: 28%;
			height: 220upx;
			float: left;
			text-align: center;
			padding: 11upx;
			font-size: 28upx;
			background: #fff;
		}

		.nav-right-item image {
			width: 150upx;
			height: 150upx;
		}

		.active {
			font-family: PingFang-SC-Bold;
			font-size: 34upx;
			font-weight: normal;
			font-stretch: normal;
			line-height: 10upx;
			letter-spacing: 0upx;
			color: #0092ff;
			background: #f2f4f7;
			border-right: 0;
			border-left: 3px solid #0092ff;
		}
		::-webkit-scrollbar {/*取消小程序的默认导航条样式*/
	   width: 0;
	   height: 0;
	   color: transparent;
	}
</style>
